import { Form, Modal, Input, message } from "antd";
import { useForm } from "antd/es/form/Form";
import { createGroup } from "@api/group";

interface CreateGroupModalProps {
    isOpen: boolean;
    handleClose: Function;
}
export interface GroupParams {
    name: string;
}

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}


export function CreateGroupModal(props: CreateGroupModalProps) {
    const [form] = useForm();

    const handleOk = async () => {
        await form.validateFields();
        const values = form.getFieldsValue();
        try {
            await createGroup(values.name);
            message.success('创建成功');
            form.resetFields();
            props.handleClose();
        } catch (error: any) {
            message.error(error?.data?.message || '系统繁忙，请稍后再试');
        }
    }

    return <Modal
        title="创建群聊"
        open={props.isOpen}
        onOk={handleOk}
        onCancel={() => { props.handleClose() }}
        okText={'创建'}
        cancelText={'取消'}
    >
        <Form
            form={form}
            {...layout}
            colon={false}
        >
            <Form.Item label='群聊名称' name='name' rules={[{ required: true, message: '请输入群聊名称' }]}><Input /></Form.Item>
        </Form>
    </Modal>
}